{extend name="public/base" /}
{block name="title"}系统设置{/block}

{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/switchery/switchery.css" rel="stylesheet">
<link rel="stylesheet" href="__PUBLIC__/static/inspinia/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>友情链接 </h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="javascript:;" onclick="add()">新增链接</a></li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content" style="padding:10px">
                <a href="javascript:;" onclick="add()" class="btn btn-primary">新增链接</a>
                <form action="{:url('System/orderLinks')}" class="ajax-form" method="post">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tr>
                                <th width="5%">排序</th>
                                <th>网站名称</th>
                                <th>网站链接</th>
                                <th>开始时间</th>
                                <th>终止时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            {empty name="list"}
                            <tr>
                                <td colspan="5" align="center">暂无数据</td>
                            </tr>
                            {else /}
                            {foreach name="list" item="vo" empty="暂无数据"}
                            <tr>
                                <td>
                                    <input class="form-control" style="width:40px;height:25px;" pattern="^\d+$" type="text" name="{$vo['id']}" value="{$vo['sort']}">
                                </td>
                                <td>{$vo.title}</td>
                                <td>{$vo.url}</td>
                                <td>{$vo.start_time}</td>
                                <td>{$vo.end_time}</td>
                                <td>
                                    <input type="checkbox" name="status[]" value="{$vo.id}" class="ajax-switch" {if $vo.status == \app\common\model\cms\LinkModel::STATUS_ONLINE}checked="checked"{/if} >
                                </td>
                                <td>
                                    <a href="javascript:;" data-id="{$vo['id']}" data-title="{$vo['title']}" data-url="{$vo['url']}" data-sort="{$vo['sort']}" data-start_time="{$vo['start_time']}" data-end_time="{$vo['end_time']}"onclick="edit(this)">修改</a> |
                                    <a href="{:url('System/deleteLinks',['id'=>$vo['id']])}" class="ajax-a">删除</a>
                                </td>
                            </tr>
                            {/foreach}
                            {/empty}
                            <tr>
                                <th colspan="7">
                                    <button class="btn btn-success" type="submit">排序</button>
                                </th>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 新增友情链接模态框开始 -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    新增友情链接
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal ajax-form" action="{:url('System/addLinks')}" method="post">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">网站名称:</label>
                        <div class="col-lg-10"><input type="text" name="title" placeholder="网站名称" class="form-control" autocomplete="off"> <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">网站链接:</label>
                        <div class="col-lg-10"><input type="url" name="url" placeholder="网站链接" class="form-control" autocomplete="off"> <span class="help-block m-b-none">例:https://www.beyongcms.com/</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">起始日期:</label>
                        <div class="col-lg-10"><input type="text" class="form-datetime form-control" placeholder="起始日期" name="start_time" autoComplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">终止日期:</label>
                        <div class="col-lg-10"><input type="text" class="form-datetime form-control" placeholder="终止日期" name="end_time" autoComplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">排序:</label>
                        <div class="col-lg-10"><input type="number" name="sort" placeholder="排序,可为空" class="form-control" autocomplete="off"> <span class="help-block m-b-none">数值越小排序越靠前</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <button class="btn btn-sm btn-white" type="submit">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 新增菜单模态框结束 -->
<!-- 修改菜单模态框开始 -->
<div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">修改友情链接</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal ajax-form" action="{:url('System/editLinks')}" method="post">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">网站名称:</label>
                        <div class="col-lg-10"><input type="text" name="title" placeholder="网站名称" class="form-control"> <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">网站链接:</label>
                        <div class="col-lg-10"><input type="url" name="url" placeholder="网站链接" class="form-control"> <span class="help-block m-b-none">例:http://www.xmtsjyxx.com/</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">起始日期:</label>
                        <div class="col-lg-10"><input type="text" class="form-datetime form-control" placeholder="起始日期" name="start_time" autoComplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">终止日期:</label>
                        <div class="col-lg-10"><input type="text" class="form-datetime form-control" placeholder="终止日期" name="end_time" autoComplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">排序:</label>
                        <div class="col-lg-10"><input type="number" name="sort" placeholder="排序" class="form-control"> <span class="help-block m-b-none">数值越小排序越靠前</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <button class="btn btn-sm btn-white" type="submit">修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__PUBLIC__/static/inspinia/js/plugins/switchery/switchery.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    // 添加菜单
    function add(){
        $("input[name='title'],input[name='url']").val('');
        $('#modal-add').modal('show');
    }

    // 修改菜单
    function edit(obj){
        var id = $(obj).data('id');
        var title=$(obj).data('title');
        var url=$(obj).data('url');
        var sort=$(obj).data('sort');
        var start_time=$(obj).data('start_time');
        var end_time=$(obj).data('end_time');
        $("input[name='id']").val(id);
        $("input[name='title']").val(title);
        $("input[name='url']").val(url);
        $("input[name='sort']").val(sort);
        $("input[name='start_time']").val(start_time);
        $("input[name='end_time']").val(end_time);
        $('#modal-edit').modal('show');
    }

    function changeStatus(value, checked) {
        var url = "{:url(request()->controller() . '/links')}" + "?id=" + value + '&checked=' + checked;
        var data = {id: value, checked: checked};

        $.post(url, data, function(res) {
            if (res.code) {
                layer.msg(res.msg);
            } else {
                layer.msg(res.msg, function(){});
            }
        });
    }

    $(document).ready(function() {
        var elems = document.querySelectorAll('.ajax-switch');
        for (var i = 0; i < elems.length; i++) {
            var checkbox = elems[i];
            var switchery = new Switchery(checkbox, { color: '#1AB394' });
            checkbox.onchange = function() {
                changeStatus(this.value, this.checked);
            }
        }
    })

    //日期控件
    $('.form-datetime').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii:ss',
        startView: 'month',
        minView: 0,
        autoclose: true,
        todayBtn: true
    });

    $('#dateType').change(function () {
        if ($('#dateType').val() == "day")
        {
            $('.form-datetime').datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd hh:ii:ss',
                startView: 'month',
                minView: 0,
                autoclose: true,
                todayBtn: true
            });
        } else {
            $('.form-datetime').datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd hh:ii:ss',
                startView: 'year',
                minView: 0,
                autoclose: true,
                todayBtn: false
            });
        }
    })
</script>
{/block}
